<!DOCTYPE HTML>
<html lang="zh-CN">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="分类: html, 杜顺">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Global site tag (gtag.js) - Google Analytics -->


    <title>分类: html | 杜顺</title>
    <link rel="icon" type="image/png" href="/ds/medias/logo1.png">

    <link rel="stylesheet" type="text/css" href="/ds/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/ds/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/ds/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/ds/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/ds/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/ds/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/ds/css/my.css">

    <script src="/ds/libs/jquery/jquery.min.js"></script>

<meta name="generator" content="Hexo 5.1.1"><link rel="alternate" href="/ds/atom.xml" title="杜顺" type="application/atom+xml">
<link rel="stylesheet" href="/ds/css/prism-tomorrow.css" type="text/css"></head>


<body>
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/ds/" class="waves-effect waves-light">
                    
                    <img src="/ds/medias/logo.png" class="logo-img" alt="LOGO">
                    
                    <span class="logo-span">杜顺</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/ds/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>首页</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/ds/tags" class="waves-effect waves-light">
      
      <i class="fas fa-tags" style="zoom: 0.6;"></i>
      
      <span>标签</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/ds/categories" class="waves-effect waves-light">
      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>分类</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/ds/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>归档</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/ds/about" class="waves-effect waves-light">
      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>关于</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/ds/friends" class="waves-effect waves-light">
      
      <i class="fas fa-address-book" style="zoom: 0.6;"></i>
      
      <span>友情链接</span>
    </a>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="搜索" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>


<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="/ds/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">杜顺</div>
        <div class="logo-desc">
            
            Never really desperate, only the lost of the soul.
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/ds/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			首页
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/ds/tags" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-tags"></i>
			
			标签
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/ds/categories" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-bookmark"></i>
			
			分类
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/ds/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			归档
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/ds/about" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-user-circle"></i>
			
			关于
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/ds/friends" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-address-book"></i>
			
			友情链接
		</a>
          
        </li>
        
        
    </ul>
</div>


        </div>

        
    </nav>

</header>

    <div class="bg-cover pd-header about-cover">
    <div class="container">
    <div class="row">
    <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
        <div class="brand">
            <div class="title center-align">
                
                Dawson的个人博客
                
            </div>

            <div class="description center-align">
                
                <span id="subtitle"></span>
                <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
                <script>
                    var typed = new Typed("#subtitle", {
                        strings: ['从来没有真正的绝境, 只有心灵的迷途','Never really desperate, only the lost of the soul'],
                        startDelay: 300,
                        typeSpeed: 100,
                        loop: true,
                        backSpeed: 50,
                        showCursor: true
                    });
                </script>
                
            </div>
        </div>
    </div>
</div>


<script>
    // 每天切换 banner 图.  Switch banner image every day.
    var bannerUrl = "/ds/medias/banner/" + new Date().getDay() + '.jpg';
    $('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');
</script>


    </div>
</div>

<main class="content">

    

<div id="category-cloud" class="container chip-container">
    <div class="card">
        <div class="card-content">
            <div class="tag-title center-align">
                <i class="fas fa-bookmark"></i>&nbsp;&nbsp;文章分类
            </div>
            <div class="tag-chips">
                
                
                
                <a href="/ds/categories/nodejs/" title="nodejs: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            style="background-color: #F9EBEA;">nodejs
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/ds/categories/vue/" title="vue: 7">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            style="background-color: #F5EEF8;">vue
                        <span class="tag-length">7</span>
                    </span>
                </a>
                
                
                <a href="/ds/categories/vue/vuex/" title="vuex: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            style="background-color: #D5F5E3;">vuex
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/ds/categories/html/" title="html: 3">
                    <span class="chip center-align waves-effect waves-light
                             chip-active "
                            style="background-color: #E8F8F5;">html
                        <span class="tag-length">3</span>
                    </span>
                </a>
                
                
                <a href="/ds/categories/vue/react/" title="react: 2">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            style="background-color: #FEF9E7;">react
                        <span class="tag-length">2</span>
                    </span>
                </a>
                
                
                <a href="/ds/categories/vue/react/webpack/" title="webpack: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            style="background-color: #F8F9F9;">webpack
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/ds/categories/vue/vue-router/" title="vue-router: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            style="background-color: #82E0AA;">vue-router
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/ds/categories/react/" title="react: 2">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            style="background-color: #D7BDE2;">react
                        <span class="tag-length">2</span>
                    </span>
                </a>
                
                
                <a href="/ds/categories/js/" title="js: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            style="background-color: #A3E4D7;">js
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/ds/categories/js/jquery/" title="jquery: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            style="background-color: #85C1E9;">jquery
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/ds/categories/html/css/" title="css: 2">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            style="background-color: #F8C471;">css
                        <span class="tag-length">2</span>
                    </span>
                </a>
                
                
                <a href="/ds/categories/vue/react/axios/" title="axios: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            style="background-color: #F9E79F;">axios
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/ds/categories/%E7%A7%BB%E5%8A%A8%E7%AB%AF/" title="移动端: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            style="background-color: #E8F8F5;">移动端
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/ds/categories/vue/antd/" title="antd: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            style="background-color: #D7BDE2;">antd
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/ds/categories/%E7%94%B5%E5%BD%B1/" title="电影: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            style="background-color: #F9E79F;">电影
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
            </div>
        </div>
    </div>
</div>


    

    <article id="articles" class="container articles">
        <div class="row tags-posts">
            
            <div class="article tag-post col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/ds/2018/09/22/css-bi-jiao-nan-ji-de-shu-xing/">
                        <div class="card-image tag-image">
                            
                            
                            <img src="/ds/medias/featureimages/9.jpg" class="responsive-img" alt="css比较难记的属性">
                            
                            <span class="card-title">css比较难记的属性</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                css比较难记的属性text-decoration: none;//去a标签的下滑线
 color: inherit;//颜色继承
outline:none;//去除轮廓线
text-decoration:line-through;//文字
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2018-09-22
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/ds/categories/html/" class="post-category">
                                    html
                                </a>
                                
                                <a href="/ds/categories/html/css/" class="post-category">
                                    css
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/ds/tags/html/">
                            <span class="chip bg-color">html</span>
                        </a>
                        
                        <a href="/ds/tags/css/">
                            <span class="chip bg-color">css</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article tag-post col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/ds/2018/05/02/dong-tai-wang-ye-he-jing-tai-wang-ye-de-qu-bie/">
                        <div class="card-image tag-image">
                            
                            
                            <img src="/ds/medias/featureimages/10.jpg" class="responsive-img" alt="动态网页和静态网页的区别">
                            
                            <span class="card-title">动态网页和静态网页的区别</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                动态网页和静态网页的区别，首先要分别了解两个概念，就是什么是静态网页，什么是动态网页，并且学会区分哪些是静态哪些是动态。
静态网页：
（1）静态网页不能简单地理解成静止不动的网页，他主要指的是网页中没有程序代码，只有HTML（即：超文本标记
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2018-05-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/ds/categories/html/" class="post-category">
                                    html
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/ds/tags/html/">
                            <span class="chip bg-color">html</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="article tag-post col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/ds/2018/04/22/html-bei-jing-tu-pian-xiao-zhi-shi/">
                        <div class="card-image tag-image">
                            
                            
                            <img src="/ds/medias/featureimages/17.jpg" class="responsive-img" alt="html背景图片小知识">
                            
                            <span class="card-title">html背景图片小知识</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                html背景图片小知识浏览器默认字体大小font-size：16px；谷歌最小字体是10px，其他浏览器都是12px。font可以继承2选择器通配选择器。。。*。。代表所有的标签标签。。class。。id。后代，子代，交集背景颜色backg
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2018-04-22
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/ds/categories/html/" class="post-category">
                                    html
                                </a>
                                
                                <a href="/ds/categories/html/css/" class="post-category">
                                    css
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>

                    
                    <div class="card-action article-tags">
                        
                        <a href="/ds/tags/html/">
                            <span class="chip bg-color">html</span>
                        </a>
                        
                        <a href="/ds/tags/css/">
                            <span class="chip bg-color">css</span>
                        </a>
                        
                    </div>
                    
                </div>
            </div>
            
        </div>
    </article>
</main>




    <footer class="page-footer bg-color">
    
    <div class="container row center-align" style="margin-bottom: 0px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            <span id="year">2018</span>
            <a href="/ds/about" target="_blank">杜顺</a>
            |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>
            
            &nbsp;<i class="fas fa-chart-area"></i>&nbsp;站点总字数:&nbsp;<span
                class="white-color">22.9k</span>&nbsp;字
            
            
            
            
            
            
            <span id="busuanzi_container_site_pv">
                |&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;<span id="busuanzi_value_site_pv"
                    class="white-color"></span>&nbsp;次
            </span>
            
            
            <br>
            
            <br>
            
        </div>
        <div class="col s12 m4 l4 social-link social-statis">


    <a href="mailto:1404898412@qq.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>







    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1404898412" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 1404898412" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>





    <a href="https://www.zhihu.com/people/e-e-89-49-49" class="tooltipped" target="_blank" data-tooltip="关注我的知乎: https://www.zhihu.com/people/e-e-89-49-49" data-position="top" data-delay="50">
        <i class="fab fa-zhihu1">知</i>
    </a>



</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script src="/ds/js/search.js"></script>
<script type="text/javascript">
$(function () {
    searchFunc("/ds/search.xml", 'searchInput', 'searchResult');
});
</script>

    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    <script src="/ds/libs/materialize/materialize.min.js"></script>
    <script src="/ds/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/ds/libs/aos/aos.js"></script>
    <script src="/ds/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/ds/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/ds/js/matery.js"></script>

    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    <script src="/ds/libs/others/clicklove.js" async="async"></script>
    
    
    <script async src="/ds/libs/others/busuanzi.pure.mini.js"></script>
    

    

    

    
    <script type="text/javascript" color="0,0,255"
        pointColor="0,0,255" opacity='0.7'
        zIndex="-1" count="99"
        src="/ds/libs/background/canvas-nest.js"></script>
    

    

    
    <script type="text/javascript" src="/ds/libs/background/ribbon-dynamic.js" async="async"></script>
    

    
    <script src="/ds/libs/instantpage/instantpage.js" type="module"></script>
    

</body>

</html>
